<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="title">
		<title>The Change | Cập nhật chấm công</title>
		<h:outputStylesheet library="css" name="jquery-ui-1.8.20.custom.css" />
		<h:outputScript library="js" name="jquery-ui-1.8.20.custom.min.js" />
		<h:outputScript library="js" name="jquery-ui-timepicker-addon.js" />
		<script type="text/javascript">
			$("document").ready(function(){
				$(".timepicker").timepicker({});
			});
		</script>
	</ui:define>
	<ui:define name="lcontent">
		<ui:include src="/template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">
		<h:form id="form">
			<f:event type="preRenderView" listener="#{attendance.onloadUpdate}"/>
			<span class="rtitle">Cập nhật chấm công</span>
			<hr />
			<a class="button-link white-bt" href="#{facesContext.externalContext.requestContextPath}/human-resources/attendance.html">
				<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/left.png" alt="" />
				<span>Quay lại</span>
			</a>
			<h:panelGroup rendered="#{attendance.attendance.status eq 1}">
				<h:commandLink styleClass="button-link green-bt load" action="#{attendance.accept}">
	            	Xác nhận
		        </h:commandLink>
				<h:commandLink styleClass="button-link white-bt load" action="#{attendance.update}">
		            Lưu lại
		        </h:commandLink>
				
			</h:panelGroup>
			<h:commandLink styleClass="button-link white-bt load" action="#{attendance.cancel}"
				rendered="#{attendance.attendance.status eq 2}">
            	Hủy bỏ
	        </h:commandLink>
	        <h:commandLink styleClass="button-link green-bt load" action="#{attendance.restore}"
				rendered="#{attendance.attendance.status eq 3}">
            	Khôi phục
	        </h:commandLink>
	        <span class="clear"></span>
			<br />
			<div class="input-panel">
				<span class="input-title">Thông tin</span>
				<table class="input-column w100">
					<tr>
						<td class="w50">
							<div class="input-item">
								<span class="italic block">Tên </span>
								<h:outputText styleClass="item-output" value="#{attendance.attendance.employee.lastname} #{attendance.attendance.employee.firstname} "></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Phòng ban</span>
								<h:outputText styleClass="item-output" value="#{attendance.attendance.employee.department.name}"></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Chức vụ</span>
								<h:outputText styleClass="item-output" value="#{attendance.attendance.employee.designation.name}"></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Giới tính</span>
								<h:outputText styleClass="item-output"  value="Nam" rendered="#{attendance.attendance.employee.gender eq 1}"></h:outputText>
								<h:outputText styleClass="item-output"  value="Nữ" rendered="#{attendance.attendance.employee.gender eq 2}"></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Số điện thoại</span>
								<h:outputText styleClass="item-output"  value="#{attendance.attendance.employee.cellphone}"></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Email</span>
								<h:outputText styleClass="item-output"  value="#{attendance.attendance.employee.email}"></h:outputText>
							</div>
						</td>
						<td class="w50">														
							<div class="input-item">
								<span class="block italic">Ngày</span>
								<h:outputText value="#{attendance.attendance.date}">
									<f:convertDateTime pattern="yyyy-MM-dd"></f:convertDateTime>
								</h:outputText>
							</div>
							
							<f:event listener="#{utilBean.initAttendanceType}" type="preRenderView"></f:event>
							<div class="input-item">
								<span class="block">Loại</span>
								<h:selectOneMenu styleClass="input w50" id="attendanceTypeSelect" value="#{attendance.attendance.type.id}">
									<f:selectItems value="#{utilBean.listAttendanceType}"></f:selectItems>
								</h:selectOneMenu>
								<a class="effect open-newAttendanceTypeDialog icon-img">
									<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/plus.png" align="absmiddle"
										alt="Thêm mới"/>
									<span>Thêm mới</span>
								</a>
								<h:commandLink class="effect icon-img">
									<f:ajax listener="#{utilBean.refreshAttendanceType}" render="form:attendanceTypeSelect"></f:ajax>
									<img align="absmiddle" src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/refresh.png"/>
									<span>Refresh</span>
								</h:commandLink>							
								<span class="italic block">Vui lòng nhấn nút "Refresh" sau khi thêm mới...</span>
							</div>
							<div class="input-item">
								<span class="block ">Giờ vào</span>
								<h:inputText styleClass="input w80 timepicker"  required="true" requiredMessage="Giờ vào không được để trống"
								converterMessage="Thời gian vào không hợp lệ" value="#{attendance.attendance.time_in}">
									<f:convertDateTime pattern="hh:mm"></f:convertDateTime>
								</h:inputText>
							</div>
							<div class="input-item">
								<span class="block">Giở ra</span>
								<h:inputText styleClass="input w80 timepicker"  required="true" requiredMessage="Giờ ra không được để trống"
									converterMessage="Thời gian về không hợp lệ" value="#{attendance.attendance.time_out}">
										<f:convertDateTime pattern="hh:mm"></f:convertDateTime>
								</h:inputText>
							</div>
							<div class="textarea-item">
								<span class="block">Ghi chú</span>
								<h:inputTextarea id="address_permanent" styleClass="textarea w80"
								value="#{attendance.attendance.description}"></h:inputTextarea>
							</div>
						</td>
					</tr>
				</table>
			</div>
	        <span class="clear"></span>
		</h:form>	
		
		<div class="wrap-dialog none" id="newAttendanceTypeDialog">
			<div class="dialog">
				<span class="dialog-title">Thêm mới loại chấm công<b class="close-dialog">X</b></span>
				<div class="dialog-content">
					<h:form id="formNewAttendanceType">
					<f:event type="preRenderView" listener="#{attendanceType.initObject}"/>
					<table class="input-column w100">
						<tr>
							<td>
								<div class="input-item">
		        					<span class="block required">Tên loại chấm công <img align="top"
									src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" /></span>
		        					<h:inputText styleClass="input w80" value="#{attendanceType.attendanceType.name}" required="true"
		        					requiredMessage="Tên không được để trống"
		        					maxlength="100"></h:inputText>
		        					<span class="italic block">Tên loại chấm công không được phép trùng nhau</span>
		        					<span class="block">Mô tả</span>
		        					<h:inputTextarea styleClass="textarea w80 " value="#{attendanceType.attendanceType.description}"
		        					maxlength="100"></h:inputTextarea>
		        				</div>
							</td>
						</tr>
						<tr>
							<td><h:commandButton styleClass="button green-bt" value="Tạo mới">
							<f:ajax execute=":formNewAttendanceType" listener="#{attendanceType.insert}"
									render=":messageForm" onevent="onMyEvent"></f:ajax>
							</h:commandButton></td>
						</tr>
					</table>						
					</h:form>
				</div>
			</div>
		</div>
		<span class="clear"></span>
		<script type="text/javascript">
		// <![CDATA[ 
			function onMyEvent(data) {
		    	var status = data.status;
			    switch (status) {
			        case 'begin':
			            break;
			        case 'complete':
			            break;
			        case 'success':
			        	$(".loading").removeClass("visible");
			        	$(".wrap-dialog").removeClass("block").addClass("none");
			            break;
			    }
			}
		// ]]> 
		</script>
	</ui:define>
</ui:composition>